<template>
  <view class="message-display">
    <!-- 普通文本消息 -->
    <text v-if="!message.movieList && !message.gameList" class="message-text">{{ message.content }}</text>

    <!-- 电影列表展示 -->
    <MovieList
        v-if="message.movieList && message.movieList.length > 0"
        :content="message.content"
        :movieList="message.movieList"
        @movie-click="handleMovieClick" />

    <!-- 游戏列表展示 -->
    <GameList
        v-if="message.gameList && message.gameList.length > 0"
        :content="message.content"
        :gameList="message.gameList"
        @game-click="handleGameClick" />
  </view>
</template>

<script>
import MovieList from './MovieList.vue'
import GameList from './GameList.vue'

export default {
  name: 'MessageDisplay',
  components: {
    MovieList,
    GameList
  },
  props: {
    message: {
      type: Object,
      required: true
    }
  },
  methods: {
    handleMovieClick(movie) {
      this.$emit('movie-click', movie)
    },
    handleGameClick(game) {
      this.$emit('game-click', game)
    }
  }
}
</script>

<style lang="scss" scoped>
.message-text {
  font-size: 16px;
  line-height: 1.4;
  word-wrap: break-word;
}
</style>